<!--
 * @Author: 雷宇航
 * @Date: 2021-08-06 14:19:06
 * @LastEditTime: 2021-08-06 16:41:01
 * @LastEditors: 雷宇航
 * @Description: 
 * @FilePath: \icm-vue\src\views\hifar\contract\modules\ContractSaleMoneyFlow.vue
-->
<template>
  <div>
    <a-tabs defaultActiveKey="1">
      <a-tab-pane :tab="index ? index + '、现金流' : '现金流'" key="1"></a-tab-pane>
    </a-tabs>
    <a-row>
      <a-col :span="24">
        <a-card style="text-align: center; line-height: 30px; width: 100%">
          <div style="display: flex; align-items: center; justify-content: center; width: 100%">
            <a-statistic title="实际回款金额（元）" :value="contractActualReturnMoney" />
            <div style="height: 60px; width: 60px; display: flex">
              <div style="width: 15px; height: 2px; background: black; margin: 45px auto"></div>
            </div>
            <a-statistic title="实际付款金额（元）" :value="contractActualPaymentMoney" />
            <div style="height: 60px; width: 60px; display: flex">
              <div style="width: 15px; height: 10px; margin: 40px auto">
                <div style="width: 15px; height: 2px; background: black"></div>
                <div style="width: 15px; height: 2px; background: black; margin-top: 5px"></div>
              </div>
            </div>
            <a-statistic title="现金流（元）" :valueStyle="color" :value="moneyFlows" />
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: 'ContractSaleMoneyFlow',
  data() {
    return {
      color: 'color:#000',
      moneyFlows:0
    }
  },
  props: ['index', 'moneyFlow', 'contractActualReturnMoney', 'contractActualPaymentMoney'],
  watch: {
    moneyFlow: {
      immediate: true,
      handler(value) {
        this.moneyFlows = value.toFixed(2)
        if (value < 0) {
          this.color = 'color:red'
        } else {
          this.color = 'color:#000'
        }
      },
    },
  },
}
</script>

<style>
</style>